<template>
  <div class="app-container">
    <div class="header">
      <div class="searchLeft">
        <el-form
          ref="ruleFormRef"
          :model="searchForm"
          :inline="true"
        >
          <el-form-item
            v-for="(item, index) in searchFormLeftList"
            :key="index"
            :label="item.label"
            :prop="item.prop"
          >
            <!-- input框 -->
            <el-input
              v-if="item.type === 'input'"
              v-model="searchForm[item.prop]"
              class="input-style"
            />
            <!-- 日期选择器 -->
            <div v-if="item.type === 'date'">
              <el-date-picker
                v-model="searchForm[item.data1]"
                type="date"
                placeholder="开始日期"
                format="YYYY/MM/DD "
                value-format="YYYY-MM-DD "
              >
              </el-date-picker>
              ——
              <el-date-picker
                v-model="searchForm[item.data2]"
                type="date"
                placeholder="结束日期"
                format="YYYY/MM/DD "
                value-format="YYYY-MM-DD "
              >
              </el-date-picker>
            </div>
            <!-- 选择器 -->
            <div v-if="item.type === 'select'">
              <el-select
                v-model="searchForm[item.prop]"
                placeholder="请选择版本号"
                filterable
                size="default"
              >
                <el-option
                  v-for="l in item.list"
                  :key="l.value"
                  :label="l.label"
                  :value="l.value"
                />
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div class="searchRight">
          <div class="button-style">
            <div class="margi-right10">
              <slot name="upload"></slot>
            </div>
            <div>
              <el-button
                size="default"
                type="primary"
                v-for="(item, index) in buttonList"
                :key="index"
                @click="item.clickFunc"
                >{{ item.label }}
              </el-button>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  searchForm: {
    type: Array,
  },
  searchFormLeftList: {
    type: Array,
  },
  buttonList: {
    type: Array,
  },
});

</script>

<style lang="scss" scoped>
.input-style {
  width: 150px;
}
.header {
  display: flex;
  .searchLeft {
    width: 75%;
  }

  .searchRight {
    width: 25%;
    display: flex !important;
    justify-content: right;
  }
}

//日历width
::v-deep .el-date-editor {
  width: 100px !important;
}
.button-style {
  margin: 5px;
  display: flex;
}
.margi-right10{
  margin-right: 10px;
}
</style>